<template>
    <view class="content">
        <view class="box">
            <view class="item">
                <view class="item-l">服务选择</view>
                <view class="item-r">
                    <input type="text" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#535353" size="24"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="item-l">开始时间</view>
                <view class="item-r">
                    <input type="text" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#535353" size="24"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="item-l">结束时间</view>
                <view class="item-r">
                    <input type="text" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#535353" size="24"></u-icon>
                </view>
            </view>
            <view class="btn">确认</view>
        </view>
        
        <view class="time">
            <view class="line"></view>
            <view class="u-p-l-15 u-p-r-15">时间设置</view>
            <view class="line"></view>
        </view>
        
        <view class="list" v-for="(item, index) in 3" :key="index">
            <image src="../../static/icon/s_time.png" class="s-time"></image>
            <view class="text">周二  8:00-10:00</view>
            <u-icon name="close-circle" color="#909db6" size="40"></u-icon>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        },
        onLoad() {
            
        },
        methods: {
            
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 30rpx;
    }
    .box{
        padding: 0 30rpx 30rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
        font-size: 30rpx;
    }
    .item-l{
        color: #949494;
    }
    .item-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        flex: 1;
        text-align: right;
        padding: 0 15rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 20rpx;
        background-color: #f29700;
        border-radius: 10rpx;
        margin-top: 30rpx;
    }
    
    .time{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        font-size: 28rpx;
        color: #8b8b8b;
    }
    .line{
        width: 260rpx;
        height: 2rpx;
        background-color: #cbcbcb;
    }
    
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 35rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 20rpx;
    }
    .s-time{
        width: 36rpx;
        height: 36rpx;
    }
    .text{
        flex: 1;
        font-size: 32rpx;
        color: #42506c;
        padding: 0 30rpx;
    }
    

</style>
